<template>
  <view class="index-content">
    <!--    <scroll-view scroll-x="true" class="index-top">
      <radio-group class="device-group" @change="radioChange">
        <label class="device-item" v-for="(item, index) in deviceList" :key="index">
          <text :class="item.isActive ? activeClass1 : normalClass ">{{item.name}}</text>
          <view>
            <radio style="display: none;" :value="item.name" />
          </view>
        </label>
      </radio-group>
    </scroll-view> -->
    <!-- <view class="index-top2" @click="tempPopupClick()"> -->
    <view class="index-top2">
      <text class="top2-hint">设备编号：</text>
      <text>{{title}}</text>
    </view>
    <view class="index-center">
      <template v-for="(item,index) in products" :key="index">
        <view class="product-item" @click.stop="addProduct(item)">

          <view class="item-info">
            <image class="item-img" :src="item.img" mode="scaleToFill"></image>

            <text class="item-name">{{item.name}}</text>
            <text class="item-price">{{displayPrice(item.price)}}</text>
            <view class="cart-add">
              <uni-icons type="cart" size="22" color="#fff"></uni-icons>
            </view>
          </view>
          <view class="item-state" v-if="item.isError">
            <image class="item-state-img" src="/static/images/sell_out.png" mode="">

            </image>
          </view>
        </view>
      </template>

    </view>
    <view :class="[indexBottom, isDisplayCart ? controlTrue : controlFalse]">
      <view :class="[cartList, isDisplayCart ? cartListDisplayTrue : cartListDisplayFalse]">
        <!-- <view class="index-bottom"> -->
        <!-- <view class="cart-list"> -->
        <view class="list-content">
          <view class="list-top">
            <text class="top-count">已选 {{cartMap.size}} 件商品</text>
            <view class="top-clear" @click.stop="clearCart">
              <uni-icons type="trash" size="20"></uni-icons>
              <text>清空</text>
            </view>
          </view>
          <!-- @touchmove.stop.prevent :解决scroll-view事件穿透问题 -->
          <scroll-view class="list-scroll" scroll-y="true" @touchmove.stop.prevent>
            <template v-for="(it,i) in cartMap.values()" :key="it.product.id">
              <view class="list-item">
                <image class="item-left" :src="it.product.img" mode="scaleToFill"></image>
                <view class="item-center">
                  <text class="item-center-name">{{it.product.name}}</text>
                  <text class="item-center-price">{{displayPrice(it.product.price)}}</text>
                </view>
                <view class="item-right">
                  <custom-number-box v-model="it.count" @change="numberBox(it)" :max="it.product.totalStock"
                    :disabledPlus="disabledPlus"></custom-number-box>
                </view>
              </view>
            </template>
          </scroll-view>
        </view>
      </view>

      <view class="cart-amount">
        <view class="cart-left">
          <text class="cart-hint">购物车</text>
          <image class="cart-pic" src="../../static/images/cartr_ico.png" mode="scaleToFill" @click.stop="cartClick">
          </image>

          <text class="cart-count">{{cartCount}}</text>

        </view>
        <text class="amount-text">{{displayPrice(totalPrice.valueOf())}}</text>
        <text class="cart-confirm-bt" @click="confirmClick">去结算</text>
      </view>

    </view>
  </view>
  <view class="">
    <uni-popup ref="popupCoupon" @change="changeCouponHint">
      <view class="popup-coupon-content">
        <text class="text1">{{isNewUser?"新人优惠券":"惊喜优惠券"}}</text>
        <image class="img1" src="https://os.saiyaoyun.com/static/shop-mini/coupon_hint_img.png" mode="aspectFill">
        </image>
        <text class="text-bt" @click="receiveCoupons">{{isNewUser?"查看新人券":"立即领取"}}</text>
        <uni-icons style="margin-top: 50rpx;" type="close" color="#f00" size="40"
          @click="tempPopupClick(false)"></uni-icons>
      </view>
    </uni-popup>
  </view>

</template>

<script lang="ts" setup>
  import { computed, getCurrentInstance, ref } from 'vue';
  import { onReady, onLoad, onShow, onBackPress, onReachBottom } from '@dcloudio/uni-app';
  import customNumberBox from "@/components/custom-number-box/custom-number-box.vue";
  import {
    userLogin,
    queryDeviceInfo,
    getProducts,
    updateOrderState,
    getUserCoupons,
    queryUserAllCoupon
  } from "@/common/utils/requestModel.js"
  import {
    displayPrice,
    loadingShow,
    loadingHide,
    parseToken,
    isValidToken,
    showToast
  } from "@/common/utils/public.ts"
  import { CartProduct, ProductBean, SubProductBean } from '@/common/models/BaseData.ts'

  onLoad((query) => {
    const qrInfo = decodeURIComponent(query.q) // 获取到二维码原始链接内容
    const scancode_time = parseInt(query.scancode_time) // 获取用户扫码时间 UNIX 时间戳

    try {
      console.log("load信息", query)
      // title.value = qrInfo
      // if (qrInfo !== undefined) {
      // urlParams = parseURL('https://shop.saiyaoyun.com/mini?fixed=1&sn=TEST20240001&rid='); //测试
      // urlParams = parseURL('https://shop.saiyaoyun.com/mini?fixed=1&sn=BDSTJ2513001&rid=');//测试
      // urlParams = parseURL('https://shop.saiyaoyun.com/mini?fixed=1&sn=ZZJBD2501001&rid=');//测试

      // }


      urlParams = parseURL(qrInfo);

      console.log('SN:', urlParams.sn, 'RID:', urlParams.rid)
      // setTimeout(() => {

      // }, 1000)
    } catch (error) {
      //TODO handle the exception

    }

    console.log("onLoad执行")
    // login({ code: "11111" })
  })
  onReady(() => {
    console.log('onReady--' + title.value, urlParams)


  })
  onBackPress(() => {
    console.log('onBackPress--')

  })
  onShow((data) => {
    getApp().globalData.cartMap = null
    cartMap.value.clear()
    computedCart()
    let deviceId = ""
    let deviceInfo = getApp().globalData.deviceInfo
    // title.value = `检查登陆${urlParams.sn}`
    console.log("检查登陆-----:", urlParams)
    if (urlParams.sn != undefined && urlParams.sn.length > 0) {
      // initCheck(urlParams.sn, urlParams.rid)
      let loginData = new LoginBean(urlParams.sn, undefined, urlParams.rid)
      let v = (urlParams.rid !== undefined && urlParams.rid.length > 0)
      // title.value = "检查成功"
      products.value = []
      loginInfo(loginData, v)
      title.value = `${urlParams.sn}-${cartMax.value}`
    } else {
      if (deviceInfo == undefined) {
        title.value = "请扫描设备二维码进入" + `-${cartMax.value}`

      } else {
        let loginData = new LoginBean(deviceInfo.sn, undefined, undefined)
        console.log("重载数据", loginData)
        products.value = []
        loginInfo(loginData, false)


        // title.value = `${deviceInfo.sn}`
        // let order = getApp().globalData.createOrder
        // console.log("订单信息-----:", order)
        // deviceId = deviceInfo.object_id
        // if (order == undefined) {
        //   // title.value = "重新加载商品"
        //   loadingShow("更新中")
        //   requestProducts(deviceInfo.sn)
        // } else {
        //   loadingShow("更新中")
        //   cancelOrder(order.id, deviceId)
        //   getApp().globalData.createOrder = undefined
        // }
      }
    }


    console.log('onShow----', urlParams, deviceInfo)
  })
  onReachBottom(() => {
    console.log('onReachBottom:滑动到底部了')
  })

  let urlParams = { sn: undefined, rid: undefined }

  function parseURL(url : string) {
    let index = url.indexOf("?")
    let content = url.substring(index, url.length)
    let list = content.split("&")
    let result = { sn: "", rid: "" }
    list.forEach((c, index, list) => {
      if (index > 0) {
        let i = c.indexOf("=")
        let data = c.substring(i + 1, c.length)
        if (index == 1) {
          result.sn = data
        } else if (index == 2) {
          result.rid = data
        }
      }
    })
    console.log("解析结果：", result)
    return result
  }
  class LoginBean {
    sn : string;
    code ?: string;
    referrer_id ?: string;
    constructor(sn : string, code ?: string, referrer_id ?: string) {
      this.code = code
      this.sn = sn
      this.referrer_id = referrer_id
    }

  }


  const controlTrue = 'index-bottom-control-true'
  const controlFalse = 'index-bottom-control-false'

  const cartListDisplayTrue = 'cart-list-true'
  const cartListDisplayFalse = 'cart-list-false'

  const indexBottom = "index-bottom"
  const cartList = "cart-list"
  var isDisplayCart = ref(false)


  const title = ref('Hello')
  const deviceList = ref([{
    name: "薯条机",
    isActive: false
  }, {
    name: "饮料机",
    isActive: false
  }, {
    name: "多功能机",
    isActive: false
  }, {
    name: "披萨机",
    isActive: false
  }])

  const radio = ref(0)
  var current = -1
  const activeClass1 = 'device-active'
  const normalClass = 'device-normal'
  function radioChange(evt) {
    for (let i = 0; i < deviceList.value.length; i++) {
      // console.log(`设备:${deviceList.value[i].name}--${evt.detail.value}`)
      const item = deviceList.value[i]
      item.isActive = false
      if (item.name === evt.detail.value) {
        current = i;
        item.isActive = true
        console.log(`选择设备:${current}--${item.name}`)
        // break;
      }
    }
  }

  const USER_INFO_TAG = "USER_INFO"
  const DEVICE_SN_TAG = "DEVICE_SN"
  const DEVICE_TAG = "DEVICE_INFO"

  /* 
  address: "华创动漫产业园C11栋"
  area: "广东省,广州市,番禺区"
  heartbeat_at: 1744436696
  location: "113.411935,22.987695"
  mode: 0
  name: "TEST20240001"
  number: "TEST20240001"
  object_id: "656c5e8474000000"
  order_size: 5
  owner_id: "648b01d05f400000"
  pay_device_id: "24092609473266"
  phone: "18926220893"
  signal_quality: "4"
  signal_type: "Wi-Fi"
  sn: "TEST20240001"
  state: 0
  use_weight: 0
  version: "02240826"
  worker_id: null */

  function initCheck(sn : string = undefined, referrerId : string = undefined) {
    let info = uni.getStorageSync(USER_INFO_TAG)

    let device = uni.getStorageSync(DEVICE_SN_TAG)
    console.log("获取本地token信息:" + device, info)
    // title.value = `开始检查sn:${sn},referrerId:${referrerId},device：${device},info：${info}`
    if (sn !== undefined || referrerId !== undefined) {
      let loginData = new LoginBean(sn, undefined, referrerId)
      let v = (referrerId !== undefined && referrerId.length > 0)
      // title.value = "检查成功"
      loginInfo(loginData, v)

    } else {

      if (device.length > 0 && info.access_token !== undefined) {
        let tokenInfo = parseToken(info.access_token)
        let isValid = isValidToken(tokenInfo)
        console.log(`获取本地token信息:---1,isValid:${isValid},,tokenInfo:`, tokenInfo)

        if (isValid) {
          // title.value == "开始请求商品"
          requestProducts(device)
        } else {
          let loginData = new LoginBean(device)
          // title.value == "开始登陆"
          loginInfo(loginData)
        }

      } else {
        //这个地方可以用于后面添加机台列表，选择机台时使用

        // console.log("获取本地token信息:---2")
        // let loginData = new LoginBean("TEST20240001")
        // login(loginData)

      }
    }


  }
  const thisPage = getCurrentInstance()

  function tempPopupClick(isOpen : boolean = true) {

    if (isOpen) {
      thisPage.refs.popupCoupon.open('center')
    } else {
      thisPage.refs.popupCoupon.close()

    }
  }

  function receiveCoupons() {
    tempPopupClick(false)
    uni.navigateTo({
      url: '/sub_buy_flow_pages/coupon_list'
    });
  }

  function changeCouponHint(data) {

  }

  function loginInfo(info : LoginBean, isReferrer : boolean = false) {
    console.log("登陆信息", info)

    loadingShow()
    //获取对应程序登陆的用户信息，微信小程序、支付宝小程序等。

    uni.login({
      provider: 'weixin',
      success: (res) => {
        let code = res.code //后台换取 openid 和 session_key 等信息
        console.log("微信code:", code)
        info.code = code
        var parmas = { ...info, code: info.code }
        console.log("登录参数:", parmas)
        userLogin(parmas).then(result => {

          console.log("数据", result.data.code)
          if (result.data.code != undefined) {
            title.value == "登陆失败1"
            console.log("登录失败数据--服务器:", result.data)
            loadingHide()
          } else {
            console.log("登录成功数据:", result)
            try {
              isNewUser = result.data.is_new
              let state = uni.setStorageSync(USER_INFO_TAG, result.data)
              let deviceSn = uni.setStorageSync(DEVICE_SN_TAG, parmas.sn)
              getApp().globalData.USER_INFO_TAG = USER_INFO_TAG
              getApp().globalData.DEVICE_SN_TAG = DEVICE_SN_TAG

              if (!isReferrer) {
                requestProducts(parmas.sn)
              } else {
                showToast('请扫描机器二维码下单')
              }
            } catch (e) {
              console.log("保存数据异常:", e)
              loadingHide()
            }

          }
        }).catch(e => {
          console.log("登录失败数据:", e)
          loadingHide()
        })

      }, fail: (e) => {
        // title.value = { ...e }
        // title.value == "登陆失败0"
        console.log("微信登录失败:", e)
        loadingHide()
      }, complete: (data) => {
        // title.value = { ...data }
        console.log("微信登录完成:", data)
        // loadingHide()
      }
    })

  }

  function parseQrInfo() {

  }

  const products = ref<ProductBean[]>([])

  async function requestProducts(sn : string) {
    queryDeviceInfo(sn).then(result => {
      console.log("设备信息:", result)

      if (result.data.code != undefined) {
        loadingHide()
        return
      }


      getApp().globalData.DEVICE_TAG = DEVICE_TAG
      let device = result.data.devices[0]
      uni.setStorageSync(DEVICE_TAG, device)
      let deviceId = device.object_id
      cartMax.value = device.order_size//点单最大限制
      getApp().globalData.deviceInfo = device
      title.value = `${urlParams.sn}-${cartMax.value}`
      getNewProducts(deviceId)
    }).catch(e => {
      loadingHide()
      showToast("设备信息--异常")
      console.log("设备信息--异常:", e)
    })
  }

  async function getNewProducts(deviceId : string) {
    getProducts(deviceId).then(result => {
      console.log("商品信息:", result)
      if (result.data.code != undefined) {
        loadingHide()
        return
      }
      //请求获取是否有优惠券

      let device = uni.getStorageSync(DEVICE_TAG)
      if (isNewUser) {
        requestUserAllCoupons()
      } else {
        reuqestCoupon(device.owner_id)
      }

      loadingHide(true)
      products.value = []
      stockMap.clear()
      let dispensableList = result.data.items.filter((val, index, array) => {
        if (val.dispensable == 1) return val
      })

      let deviceTime = Date.now() / 1000 //获取系统时间秒
      let r = deviceTime - device.heartbeat_at
      let isEnable = true
      if (r >= 30) {
        console.log("设备离线:", r, "--" + device.heartbeat_at)
        isEnable = false
        title.value = `${device.sn}-${cartMax.value}-[离线]`
        showToast("设备离线不能购买")
      }


      console.log("商品信息--散装信息:", dispensableList)
      result.data.items.forEach((val, index, array) => {
        // console.log("商品信息--item:", val)
        if (val.dispensable != 1) {
          let p = new ProductBean(
            val.object_id,
            val.name,
            val.price,
            val.img,
            isEnable ? val.valid_stock - val.lock_stock : 0,
            isEnable ? val.valid_stock : 0,
            val.state,
            val.sort
          )
          val.settings.delivery.forEach((v, index, arr) => {
            console.log("商品信息--delivery:", v)
            //处理散装商品，修改匹配的商品ID
            let isDispensable = false
            dispensableList.forEach((d, index, arr) => {
              if (d.object_id == v.product_id) {
                console.log("商品信息--散装:", d)
                isDispensable = true
              }
            })
            let id = v.product_id
            if (isDispensable) {
              id = p.id
            }
            p.subList.push(new SubProductBean(id))
          })
          products.value.push(p)
          stockMap.set(p.id, new ProductStock(p.totalStock))
        }
      })
      products.value.forEach((v, index, arr) => {

        console.log("商品信息---添加成功:" + index, v)
      })
    }).catch(e => {
      showToast("商品信息--异常")
      console.log("商品信息--异常:", e)
    })
  }

  /*  async function cancelOrder(orderId : string, deviceId : string) {
      console.log("取消订单--开始", orderId, deviceId)
      updateOrderState(orderId, 3).then(result => {
        console.log("取消订单--结果", result)
        if (result.data.code != undefined) {
          console.log("取消订单--失败", result)
          // return
        }
        loadingHide(true)
        getNewProducts(deviceId)
  
      }).catch(e => {
        console.log("取消订单异常", e)
        loadingHide(true)
      })
    } */

  async function reuqestCoupon(operator_id) {
    getUserCoupons(operator_id).then(result => {
      console.log("优惠群活动信息--结果", result)
      if (result.data.code != undefined) {

        return
      }
      // isNewUser
      if (result.data.items.length > 0) {
        tempPopupClick(true)
      }
    }).catch(e => {

    })
  }

  async function requestUserAllCoupons() {

    let device = uni.getStorageSync(getApp().globalData.DEVICE_TAG)

    queryUserAllCoupon(device.owner_id, {}).then((result => {
      console.log("用户优惠券所有信息:", result)
      if (result.data.code == 'undefined') {

        return
      }

      if (result.data.items.length > 0) {
        tempPopupClick(true)
      }

    })).catch((e) => {

    })
  }


  class ProductStock {
    private originStock : number
    calculateStock : number = 0
    constructor(total : number) {
      this.originStock = total
      this.calculateStock = this.originStock
    }
    init() {
      this.calculateStock = this.originStock
    }
    minus() {
      this.calculateStock -= 1
      if (this.calculateStock < 0) { this.calculateStock = 0 }
    }
    plus() {
      this.calculateStock += 1
      if (this.calculateStock > this.originStock) { this.calculateStock = this.originStock }
    }
  }

  let isNewUser = false
  const cartMap = ref(new Map<string, CartProduct>())
  const stockMap = new Map<string, ProductStock>()
  const totalPrice = ref(0)
  const cartCount = ref(0)
  let cartMax = ref(1)
  const disabledPlus = ref(false)

  function computedCart() {
    let arr = [...cartMap.value.values()]
    totalPrice.value = arr.reduce((sum, item) => sum + (item.product.price * item.count), 0)
    cartCount.value = arr.reduce((sum, item) => sum + item.count, 0)
    if (cartCount.value == cartMax.value) {
      disabledPlus.value = true
      showToast(`最多购买${cartMax.value}份`)
    }
    console.log("购物车---商品信息:", cartMap.value)
  }

  function addProduct(p : ProductBean) {
    console.log("添加商品：", p)
    if (cartCount.value < cartMax.value) {
      let bean = cartMap.value.get(p.id)
      let result = true
      p.subList.forEach((current, index, arr) => {
        let pStock = stockMap.get(current.id)
        let t = pStock.calculateStock - 1
        if (t < 0) {
          result = false
        }
      })
      if (result) {
        if (bean == undefined) {
          let cartP = new CartProduct(p.totalStock, p)
          cartP.plus()
          cartMap.value.set(p.id, cartP)
          p.subList.forEach((current, index, arr) => {
            stockMap.get(current.id).minus()
          })
          computedCart()
        } else {
          if (bean.plus()) {
            p.subList.forEach((current, index, arr) => {
              stockMap.get(current.id).minus()
            })
            computedCart()
          } else {
            showToast('-库存不足-')
          }
        }
      } else {
        showToast('库存不足')
      }
    } else {
      disabledPlus.value = true
      showToast(`最多购买${cartMax.value}份`)
    }
    console.log("库存计算信息：", stockMap)
  }

  function removeProduct(p : ProductBean) {

  }

  function numberBox(c : CartProduct) {
    console.log("购物车信息:", c)
    let calculate = 1
    if (c.count <= c.recordCount) {//减
      disabledPlus.value = false
      c.product.subList.forEach((current, index, arr) => {
        stockMap.get(current.id).plus()
      })
      c.setRecord()
      if (c.count == 0) {
        let d = cartMap.value.delete(c.product.id)
        console.log("购物车--删除商品:", c.product.name)
      }
      computedCart()
    } else {//加

      if (c.count > 4) {
        showToast('最多购买5份')
        if (!disabledPlus.value) {
          c.minus()
          addProduct(c.product)
        }
        disabledPlus.value = true
      } else {
        c.minus()
        addProduct(c.product)
        if (cartCount.value >= 5) {
          disabledPlus.value = true
          showToast('最多购买5份')
        }
      }
    }
  }

  function cartClick() {
    console.log("点击购物车");
    isDisplayCart.value = !isDisplayCart.value
  }

  function clearCart() {
    console.log("点击清空");
    resetStock()
    cartMap.value.clear()
    totalPrice.value = 0
    cartCount.value = 0
    disabledPlus.value = false
    isDisplayCart.value = false
  }

  function resetStock() {
    stockMap.forEach((value, key) => {
      value.init()
    })
  }

  function confirmClick() {
    if (cartCount.value > 0) {
      let app = getApp()
      app.globalData.cartMap = cartMap.value
      uni.navigateTo({
        url: '/sub_buy_flow_pages/confirm_order'
      });
    } else {
      showToast('请先购买商品')
    }
  }
</script>

<style lang="scss">
  // @import '@/styles/common.scss';

  @keyframes scaleAnim {

    0%,
    100% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.5);
    }
  }

  .index-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .popup-coupon-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .text1 {
      width: 100%;
      padding: 20rpx 0;
      font-size: 60rpx;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0em;
      font-variation-settings: "opsz" auto;
      font-feature-settings: "kern" on;
      background: linear-gradient(180deg, #F88419 30%, #fc4973 80%, #fc4973 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }

    .img1 {
      // width: 100%;
    }

    .text-bt {
      width: 280rpx;
      line-height: 80rpx;
      opacity: 1;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 50rpx;
      box-sizing: border-box;
      border: 3px solid #FBFF00;
      text-align: center;
      color: #FBFF00;
    }
  }

  .index-top2 {
    width: 100%;
    padding: 30rpx 20rpx;
    background: #ffffff;

    .top2-hint {
      font-size: 40rpx;
      font-weight: 700;
    }
  }

  /*  .index-top {
    width: 100%;
    white-space: nowrap;
    padding: 5rpx;
    background: #ffffff;

    .device-group {
      display: inline-flex;
      // width: 100%;
      padding: 5rpx 0;
      background: #ffffff;

      .device-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 80rpx;
        margin: 5rpx 5rpx;

        .device-active,
        .device-normal {
          width: 200rpx;
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
          color: #000000;
          font-size: 30rpx;
        }

        .device-active {
          color: #FFB200;
          border-bottom: solid 4rpx #d3a601;
        }

        .device-normal {
          // background-color: #ffff19;
        }

      }

    }

  } */

  .index-center {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 5rpx;
    padding-bottom: 135rpx;

    .product-item {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      width: 30%;
      height: 330rpx;
      margin: 10rpx 12rpx;
      background: #ffffff;
      border-radius: 10rpx;


      .item-info {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        padding: 15rpx;
        box-sizing: border-box;

        .item-img {
          width: 100%;
          height: 190rpx;
        }

        .item-name {
          display: block;
          width: 100%;
          line-height: 50rpx;
          text-align: center;
          padding: 5rpx 0;
          font-size: 30rpx;
        }

        .item-price {
          display: block;
          width: 100%;
          line-height: 50rpx;
          text-align: center;
          padding: 5rpx 0;
          font-size: 35rpx;
        }

        .cart-add {
          position: absolute;
          top: 6rpx;
          right: 6rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 70rpx;
          height: 70rpx;
          padding: 2rpx 2rpx 0 0;
          background: $color-DE1319;
          // background: $uni-primary;
          border-radius: 35rpx;
          box-sizing: border-box;

          .cart-img {
            width: 30rpx;
            height: 25rpx;
          }
        }

      }

      .item-state {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 10rpx;

        .item-state-img {
          position: relative;
          width: 110rpx;
          height: 100rpx;
          transform: translate(0, -50%);
        }
      }
    }

  }

  .index-bottom-control-true {
    touch-action: none;
  }

  .index-bottom-control-false {
    pointer-events: none;
  }

  .cart-list-true {
    visibility: visible;
    touch-action: none;
  }

  .cart-list-false {
    visibility: hidden;
    pointer-events: none;
  }

  .index-bottom {
    position: fixed;
    display: block;
    bottom: 0;
    // pointer-events: none;
    width: 100%;
    height: 100%;

    // touch-action: none; // 阻止触摸事件穿透 

    .cart-list {
      position: relative;
      // visibility: hidden;

      // visibility: visible;
      // display: none;// 会隐藏元素并移除布局空间

      width: 100%;
      height: 90%;
      background: rgba(0, 0, 0, 0.5);

      .list-content {
        position: absolute;
        bottom: -1rpx;
        width: 100%;
        height: 470rpx;
        padding: 20rpx;
        background: #fff;
        border-radius: 10rpx 10rpx 0 0;
        box-sizing: border-box;
        // touch-action: none;
        // pointer-events: auto;

        .list-top {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 80rpx;

          .top-count {
            font-size: 25rpx;
          }

          .top-clear {
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 25rpx;
          }
        }

        .list-scroll {
          width: 100%;
          height: 360rpx;
          padding: 10rpx 0;
          border-top: 2rpx solid #D8D8D8;
          border-bottom: 2rpx solid #D8D8D8;
          background-color: white;
          box-sizing: border-box;

          .list-item {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 135rpx;
            padding: 10rpx 0;
            // margin-top: 20rpx;
            // box-sizing: border-box;
            // background: blue;

            .item-left {
              width: 140rpx;
              height: 100%;
            }

            .item-center {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              width: 50%;
              padding: 10rpx 10rpx;
              // background: #D8D8D8;

              .item-center-name {
                font-size: 25rpx;
              }

              .item-center-price {
                font-size: 30rpx;
              }

            }

            .item-right {
              display: flex;
              align-items: flex-end;
              width: 30%;
              // background: #4fd85f;
            }
          }
        }
      }
    }

    .cart-amount {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 11%;
      background: #ffffff;
      box-sizing: border-box;
      // touch-action: none;
      pointer-events: auto;

      .cart-left {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 150rpx;
        line-height: 120rpx;
        margin-left: 20rpx;

        .cart-hint {
          width: 40rpx;
          line-height:25rpx;
          font-size: 25rpx;
          color: black;
          font-weight: 700;
        }

        .cart-pic {
          width: 80rpx;
          height: 85rpx;
          // margin-top: 10rpx;
        }

        .cart-count {
          position: absolute;
          top: -10rpx;
          right: -5rpx;
          width: 40rpx;
          height: 40rpx;
          text-align: center;
          line-height: 40rpx;
          background-color: $color-DE1319;
          border-radius: 20rpx;
          font-size: 25rpx;
          color: #ffffff;
          // animation: scaleAnim 1.2s ease-in-out ;
        }
      }

      .amount-text {
        width: 200rpx;
        text-align: left;
        line-height: 150rpx;
        margin-left: 30rpx;
        font-size: 50rpx;
        color: #000000;
      }

      .cart-confirm-bt {
        position: absolute;
        right: 0;
        width: 200rpx;
        height: 70rpx;
        text-align: center;
        line-height: 70rpx;
        border-radius: 35rpx;
        margin-right: 30rpx;
        margin-top: 10rpx;
        background: $color-FFD804;
      }
    }

  }
</style>